import React from "react";
import { View, Text, StyleSheet, Image } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { p } from "utils/pxToDp";
import { observer } from "mobx-react-lite";
import themeStore from "stores/theme";
import YText from "components/YText";
import YButton from "components/YButton";

const Log = () => {
  const theme = themeStore.theme;
  return (
    <LinearGradient
      colors={[
        theme.gradientr1,
        theme.gradientr2,
        theme.gradientr3,
        theme.gradientcomment,
      ]}
      style={styles.logbox}
    >
      <View
        style={[
          styles.flex,
          {
            marginBottom: p(20),
          },
        ]}
      >
        <View style={styles.flex}>
          <Image
            source={require("assets/log-heart.png")}
            style={styles.hearticon}
          />
          <YText color={theme.mainText} size={theme.f28} bold>
            情侣日记
          </YText>
        </View>
        <YText color={theme.lightText} size={theme.f22}>
          (更新于2022-11-20)
        </YText>
      </View>
      <View style={styles.flex}>
        <View>
          <YText
            color={theme.mainText}
            size={theme.f32}
            style={{ marginBottom: p(10) }}
          >
            标题哦
          </YText>
          <YText color={theme.lightText} size={theme.f22}>
            记录者：作者
          </YText>
        </View>
        <Image source={require("assets/boy.png")} style={styles.face} />
      </View>
      <View style={{ marginTop: p(10) }}>
        <YText color={theme.mainText} size={theme.f26}>
          这是内容区啊
        </YText>
      </View>
      <View style={[styles.flex, { marginTop: p(10) }]}>
        <YText color={theme.lightText} size={theme.f22}>
          2024年11月20日 12:31
        </YText>
        <YButton
          // style={{ paddingVertical: p(10) }}
          title="查看更多"
          titleStyle={{ fontSize: p(26), color: "white" }}
        />
      </View>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  logbox: {
    padding: p(25),
    borderRadius: p(25),
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: p(25),
    paddingBottom: p(10),
  },
  flex: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: p(20),
  },
  face: {
    width: p(50),
    height: p(50),
    borderRadius: p(25),
  },
  hearticon: {
    width: p(40),
    height: p(40),
    marginRight: p(10),
  },
});

export default observer(Log);
